<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Termtter Sample Skin</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
body {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: Verdana,Helvetica;
  color: #98FF68;
  background-color: #141414;
}
img {
  border: none;
}
#wrap {
  padding: 8px;
}
.error_message {
  color: red;
}
#execute_text {
  width: 96%;
  color: #98FF68;
  background-color: #141414;
  border: none;
  font-size: 12px;
}
.status_line {
  margin: 1px 0;
}
.profile_image {
  margin: 0 4px;
}
.status_date {
  color: #5C5C5C;
}
.status_text {
  margin-right: 4px;
}
</style>
<body>
<div id="wrap">
  <div id="input_area">
    <form id="execute_command">
      <span id="prompt">&gt; </span><input id="execute_text" type="text" size="80" autocomplete=off />
    </form>
  </div>
  <div id="loading" style="display: none;">...</div>
  <div id="result"></div>
</div>
<script type="text/javascript">
<!--
var cmd_history = (function(){ 
  var xs = [];
  var idx = 0;
  return {
  "add":function(cmd){
    xs.push(cmd);
    idx = xs.length;
  },
  "next":function(){
    idx -= 1;
    return xs[idx];
  },
  "prev":function(){
    idx += 1;
    return xs[idx];
  } 
}})();

$(document).ready(function(){
  $("#execute_text").focus();
  execute_command('reload.html');
  setInterval(function(){
    execute_command('reload.html');
  }, 10 * 1000)
})



$("#execute_text").keydown(function(e){
  // $B>e(B
  if(e.which == 38) $("#execute_text").val(cmd_history.next());
  // $B2<(B
  if(e.which == 40) $("#execute_text").val(cmd_history.prev());
});


$("#result").bind("ajaxError", function(event, reqest){
  $('<div class="error_message"/>').text(reqest.responseText).prependTo(this);
  $("#prompt").show();
});

$("#execute_command").submit(function () {
  var command = $("#execute_text").val();
  $('<div class="status_line"/>').text('> ' + command).prependTo('#result');

  cmd_history.add(command);

  if (command.match(/^\s*$/)) {
    return false;
  }
  $("#execute_text").val('');
  $("#prompt").hide();
  execute_command(command);
  return false;
});

function execute_command(command) {
  var path = "/" + command
  $.getJSON(path,
    function(data){
      $.each(data, function(i, status){
        var status_line = $('<div class="status_line"/>');
        var user_link = $('<a/>').attr('href', 'http://twitter.com/' + status.user.screen_name).attr('target', '_blank');
        $('<img class="profile_image"/>').attr('src', status.user.profile_image_url).attr('height', '28').attr('width', '28').appendTo(user_link);
        user_link.appendTo(status_line);


        var screen_name = $('<span class="screen_name"/>').text(' ' + status.user.screen_name);
        var status_text = $('<span class="status_text"/>').text(': ' + status.text);
        var status_id   = $('<span class="status_id"/>'  ).text(' ' + status.id);
        var status_date = $('<span class="status_date"/>').text('(' + format_datetime(status.created_at) + ') ');
      
        screen_name.click(function(e){
          var name = $(e.target).text().trim();
          $("#execute_text").val($("#execute_text").val() + " @" + name);        
        });

        status_id.click(function(e){
          var sid = $(e.target).text().trim();
          $("#execute_text").val($("#execute_text").val() + " " + sid);        
        });

        screen_name.appendTo(status_line);
        status_text.appendTo(status_line);
        status_id.appendTo(status_line);
        status_date.appendTo(status_line);

        status_line.prependTo("#result");
      });
      scrollTo(0, 0);
      $("#prompt").show();
    }
  );
}

function format_datetime(time_value) {
  var values = time_value.split(/\s+/);
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var date = new Date(time_value);
  date.setMinutes(date.getMinutes() - (new Date()).getTimezoneOffset());
  return (date.getHours() < 10 ? '0' : '') + date.getHours() + ':' + 
          (date.getMinutes() < 10 ? '0' : '') + date.getMinutes() + ':' + 
          (date.getSeconds() < 10 ? '0' : '') + date.getSeconds();
}
-->
</script>
</body>
</html>
